/*基金-历史成交页面 path: '/fundhistory'*/
/*calljcl11168  接口调试*/
<template>
  <div class="fund-history common-fun-trade">
    <header-top :option="headerOption"></header-top>

    <div class="fund-history-content">

      <div class="fund-history-lot">选择查询的时间区间</div>

      <div class="fund-history-item">
        <popup-picker  class="fund-history-date-wrap" :data="historyDateStart.data" :value='historyDateStart.value' @onScroll='onFundStartScroll' >
                      <span class="init-money_value-wrap_value"
                            v-text='historyDateStart.value[0] + "." + historyDateStart.value[1] + "." +historyDateStart.value[2]'></span>
          <i class="iconfont">&#xe62d;</i>
        </popup-picker>
        &nbsp;-
        <popup-picker  class="fund-history-date-wrap" :data="historyDateEnd.data" :value='historyDateEnd.value' @onScroll='onFundEndScroll' >
                      <span  class="init-money_value-wrap_value"
                             v-text='historyDateEnd.value[0] + "." + historyDateEnd.value[1] + "." +historyDateEnd.value[2]'></span>
          <i class="iconfont">&#xe62d;</i>
        </popup-picker>
      </div>
      <div class="fund-history-buttom"><div class="fund-history-button" @click.stop.prevent="onSearchHistory">查询</div></div>
    </div>

    <div>
      <history-list ref="hisobject" v-show="startDate!='' && endDate!=''" :startDate="startDate"  :endDate="endDate" ></history-list>
    </div>
    <div v-if="debug" v-text="test" ></div>
  </div>
</template>

<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'
  import PopupPicker from 'components/popup-picker'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import HistoryList from 'components/fund/HistoryList'
  //v-show="startDate!='' && endDate!=''"
  export default {
    data () {
      return {
        startDate:"",
        endDate:"",
        test:"",
        debug:true,
        userCode:"",
        headerOption: {
          title: '历史成交',
          leftBtn: Constant.leftBtn.BACK,
          operations: [],
        },
        historyDateStart:{
          data:[
            [{name: '2017年',value:'2017'},{name:'2018年',value:'2018'}],
            [{name: '1月',value:'1'},{name:'2月', value: '02'}],
            [{name: '1日 星期六', value: '1'},{name: '2日 星期日', value: '02'}]
          ],
          value:['2017','01','01']
        },
        historyDateEnd:{
          data:[
            [{name: '2017年',value:'2017'},{name:'2018年',value:'2018'}],
            [{name: '1月',value:'1'},{name:'2月', value: '02'}],
            [{name: '1日 星期六', value: '1'},{name: '2日 星期日', value: '02'}]
          ],
          value:['2018','02','02']
        },
        years:[],
        months: [],
        days: [],
        weeks: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],

      }
    },
    created(){
      this.initPicker();
      this.userCode=LocalDAO.getUserCode();//"49205";//"41167";
    },
    components: {
      'popup-picker':PopupPicker,
      HeaderTop,
      'history-list':HistoryList,
    },
    methods:{
      initPicker: function () {
        let today = new Date();
        let year =today.getFullYear();
        let month = today.getMonth();
        let day = today.getDate();
        let i;
        for(i=year+1; i>2016; i--){
          let tempY = i-1;
          this.years.push({name: tempY+'年',value: tempY +''});
        }

        for(i=0;i<12;i++){
          this.months.push({name: i+1 + '月',value: i<9? '0'+(i+1): i+1+''});
        }
        let dayIndex = today.getDate() - 1;
        this.historyDateStart.data = [this.years, this.months, this.getDays(year, month)];
        this.historyDateStart.value = [
          this.historyDateStart.data[0][0].value,
          this.historyDateStart.data[1][month].value,
          this.historyDateStart.data[2][dayIndex].value
        ];
        this.autoSetDate();
      },
      autoSetDate: function () {
        let year = parseInt(this.historyDateStart.value[0]);
        let tempD = new Date(year, parseInt(this.historyDateStart.value[1]) - 1, parseInt(this.historyDateStart.value[2]));
        tempD = new Date(tempD.getTime());
        this.historyDateEnd.data = [this.years, this.months, this.getDays(tempD.getFullYear(), tempD.getMonth())];

        this.historyDateEnd.value = [
          this.historyDateEnd.data[0][tempD.getFullYear() > year ? 1 : 0].value,
          this.historyDateEnd.data[1][tempD.getMonth()].value,
          this.historyDateEnd.data[2][tempD.getDate() - 1].value
        ];
      },
      onFundStartScroll: function (val){
        this.historyDateStart.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
        this.historyDateStart.value = val;
      },
      onFundEndScroll: function (val){
        this.historyDateEnd.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
        this.historyDateEnd.value = val;
      },
      getDays: function (year,month){
        year = parseInt(year);
        month = parseInt(month);
        let isRN = 0;
        if((year%4 == 0 && year%100 != 0) || (year%400 == 0)) isRN = 1;
        let monthsDay = [31, 28+isRN, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        let days = [], tempToday = new Date(year, month);
        for(let i=0; i<monthsDay[month];i++){
          tempToday.setDate(i+1);
          days.push({name: i+1+' '+ this.weeks[tempToday.getDay()], value: (i+1) < 10 ? '0'+(i+1):i+1+''});
        }
        return days;
      },
      //查询开放式基金历史成交记录.
      onSearchHistory:function(){

        let startd=parseInt(this.historyDateStart.value[0]+this.historyDateStart.value[1]+this.historyDateStart.value[2]);
        let endd=parseInt(this.historyDateEnd.value[0]+this.historyDateEnd.value[1]+this.historyDateEnd.value[2]);
        this.startDate=startd;
        this.endDate=endd;
        this.$nextTick(function() {
          this.$refs.hisobject.onGetHistory();
        });

      },
    }
  }
</script>

<style scoped>
  .fund-history-content{
    background: #fff;
    padding: 20px 30px 30px 30px;
  }

  .fund-history-lot{
    line-height: 12px;
    color: #999999;
    font-size: 12px;
    padding-left: 1%;
    margin-bottom: 13px;
  }

  .fund-history-item{
    margin-bottom: 18px;
  }

  .fund-history-button{
    border-radius:5px;
    background: #3f78e1;
    text-align: center;
    width: 100%;
    height: 36px;
    color: #ffffff;
    line-height: 36px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fund-history-buttom{
    width: 100%;
  }


  .fund-history-date-wrap{
    margin-left: 4px;
    color: #565656;
    border: solid 1px #D8D8D8;
    height: 32px;
    border-radius: 3px;
    display: inline-block;
    min-width: 109px;
    width: 44%;
  }

  .fund-history-date-wrap i{
    color: white;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(95, 170, 232, 1);
    float: right;
    padding: 8px 8px;
    height: 31px;
  }

  .fund-history-date-wrap span{
    height: 30px;
    line-height: 31px;
    vertical-align: middle;
    padding-left: 5px;
    text-align: center;
  }
</style>
